<template>
  <button
    :type="nativeType"
    :class="['yd-button',text?null:`yd-btn-${type}`,{'yd-btn-text':text},{'yd-btn-round':round},text?null:`yd-btnSize-${size}`]"
  >
    <span :class="['text-span',text&&type?`text-color-${type}`:null]">
      <slot></slot>
    </span>
  </button>
</template>

<script>
export default {
  name: "yd-button",
  props: {
    type: {
      type: String,
      default: "default"
    },
    text: {
      type: Boolean,
      default: false
    },
    round: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: "medium"
    },
    nativeType: {
      type: String,
      default: "button"
    }
  }
};
</script>

<style lang="scss" scoped >
.yd-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #666;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0 4px;
  transition: 0.1s;
  font-weight: 500;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  padding: 10px 20px;
  font-size: 14px;
  border-radius: 4px;
  cursor: pointer;
}
.yd-btn-default:hover {
  background-color: rgba(210, 210, 210, 0.2);
}
.yd-btn-default:active {
  background-color: rgba(210, 210, 210, 0.35);
}
/*type主题 */
.yd-btn-primary {
  color: #fff;
  background-color: #409eff;
  border-color: #409eff;
}
.yd-btn-primary:hover {
  background-color: #66b1ff;
  border-color: #66b1ff;
}
.yd-btn-primary:active {
  background-color: #3a8ee6;
  border-color: #3a8ee6;
}
.yd-btn-warning {
  color: #fff;
  background-color: #e6a23c;
  border-color: #e6a23c;
}
.yd-btn-warning:hover {
  background-color: #ebb563;
  border-color: #ebb563;
}
.yd-btn-warning:active {
  background-color: #cf9236;
  border-color: #cf9236;
}
.yd-btn-danger {
  color: #fff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}
.yd-btn-danger:hover {
  background-color: #f78989;
  border-color: #f78989;
}
.yd-btn-danger:active {
  background-color: #dd6161;
  border-color: #dd6161;
}
.yd-btn-success {
  color: #fff;
  background-color: #67c23a;
  border-color: #67c23a;
}
.yd-btn-success:hover {
  background-color: #85ce61;
  border-color: #85ce61;
}
.yd-btn-success:active {
  background-color: #5daf34;
  border-color: #5daf34;
}
.yd-btn-info {
  color: #fff;
  background-color: #909399;
  border-color: #909399;
}
.yd-btn-info:hover {
  background-color: #a6a9ad;
  border-color: #a6a9ad;
}
.yd-btn-info:active {
  background-color: #82848a;
  border-color: #82848a;
}
/*text文字按钮*/
.yd-btn-text {
  padding: 0;
  border: none;
  background-color: #fff;
  border-radius: 0;
  .text-span {
    box-sizing: border-box;
    padding-bottom: 2px;
  }
}
.yd-btn-text:hover {
  background-color: #fff;
  border-color: #fff;
}
.yd-btn-text:hover .text-span {
  border-bottom: 1px solid;
}
.text-color-primary {
  color: #409eff;
}
.text-color-success {
  color: #67c23a;
}
.text-color-warning {
  color: #e6a23c;
}
.text-color-danger {
  color: #f56c6c;
}
.text-color-info {
  color: #909399;
}
/*round圆角*/
.yd-btn-round {
  border-radius: 20px;
}
/*size尺寸*/
.yd-btnSize-medium {
  padding: 10px 20px;
  font-size: 14px;
}
.yd-btnSize-small {
  padding: 8px 14px;
  font-size: 14px;
}
.yd-btnSize-mini {
  padding: 6px 10px;
  font-size: 12px;
}
</style>